---
title: OnDrag events
description: A guide on how to use Fluid DnD calling onDragStart and onDragEnd events.
---

import OnDragEvents from "@/components/vue/OnDragEvents.vue";
import OnDragEventsWithMoreInfo from "@/components/vue/OnDragEventsWithMoreInfo.vue"
import { Code, Aside } from "@astrojs/starlight/components";

### List of number example

With **Fluid DnD** you can create events when you start dragging an element (`onDragStart`) or when it is dropped (`onDragEnd`).\
We'll define group of lists and add `onDragStart` and `onDragEnd` events that toggle `marked-droppable` class on **droppables** using a reference of the parent of those (`droppableGroup`):

export const highlightsListOfNumbers = ["onDragStart", "onDragEnd"];

export const listOfNumbers = `<script setup lang="ts">
...
const droppableGroup = useTemplateRef('droppableGroup')
function onDragStart(){
  const droppables = droppableGroup.value?.querySelectorAll('.droppable-group-group1')??[]
  for (const droppable of [...droppables]) {
    droppable.classList.toggle('marked-droppable',true)
  }
}
function onDragEnd (){
  const droppables = droppableGroup.value?.querySelectorAll('.droppable-group-group1')??[]
  for (const droppable of [...droppables]) {
    droppable.classList.toggle('marked-droppable',false)
  }
}

const list1 = ref([1, 2, 3, 4]);
const [ parent1 ] = useDragAndDrop(list1, {
  droppableGroup: "group1",
  onDragStart,
  onDragEnd,
});
...
const list2 = ref([5, 6, 7, 8]);
const [ parent2 ] = useDragAndDrop(list2, {
  droppableGroup: "group1",
  direction: "horizontal",
  onDragStart,
  onDragEnd,
});
</script>`;

<Code code={listOfNumbers} lang="vue" mark={highlightsListOfNumbers} />

### Creating the view

After, we'll create the two lists on the view and passing the `droppableGroup` reference:

export const listOfNumbersDraggable = `
<template>
  <div ref="droppableGroup" class="group-list">
    <ul ref="parent1" class="number-list">
        <!-- ... -->
    </ul>
    <div ref="parent2" class="number-list-h">
        <!-- ... -->
    </div>
  </div>
</template>
<style>
 ...
</style>
`;

export const highlightsDraggable = ["droppableGroup"];

<Code code={listOfNumbersDraggable} lang="vue" mark={highlightsDraggable} />

### Preview

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <OnDragEvents client:load  />
</div>

### Use onDrag events params

You can use `onDragStart` and `onDragEnd` events to get more information about the dragging process. 
For example, you can get the `value` of the element that is being dragged and the `value` of the last element that was dropped.
<Aside type="note">You can also get the value of the `index` attribute from `DragEndEventData` and `DragStartEventData`.</Aside>

export const onDragParams = `<script setup lang="ts">
import { type DragEndEventData, type DragStartEventData } from "fluid-dnd";
//...
const draggedElement = ref<number | undefined>(undefined)
const lastDroppedElement = ref<number | undefined>(undefined)
function onDragStart(data: DragStartEventData<number>){
  draggedElement.value = data.value;
  //...
}
function onDragEnd (data: DragEndEventData<number>){
  lastDroppedElement.value = data.value;
  //...
}
//...
</script>`;
export const highlightsOnDragParams = ["draggedElement", "lastDroppedElement", "data", "DragEndEventData", "DragStartEventData","data.value"];

<Code code={onDragParams} lang="vue" mark={highlightsOnDragParams} />

### Preview

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <OnDragEventsWithMoreInfo client:load  />
</div>
